<!--
 * @Descripttion: 课堂分析详情-节点详情弹框
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-11-07 18:52:39
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-11-07 18:52:39
-->
<template>
	<div v-if="isVisibleNodeInfoDialog" class="node-info-dialog" ref="nodeInfoDialogRef">
		<span class="close-icon" @click="closeNodeInfoDialog"
			><el-icon> <CloseBold /> </el-icon
		></span>
		<div v-if="moduleShow.nodeTitleShow" class="node-title">
			<span v-if="textName" class="node-text">{{ textName }}</span>
			<span v-if="typeName" class="node-type">{{ typeName }}</span>
		</div>
		<div class="content-wrapper">
			<!-- 课堂信息 -->
			<div
				v-if="moduleShow.lessonInfoBlockShow && moduleShow.moduleTitleShow"
				class="block-item-wrapper lesson-info-block"
			>
				<div class="block-title">课堂信息</div>
				<div class="block-content">
					<div class="lesson-info-item-wrapper">
						<span class="info-label">课堂名称</span>
						<div class="lesson-name">{{ lessonInfo?.name || '未知课堂' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">上课时间</span>
						<div class="lesson-name">
							{{
								lessonInfo?.planBeginTime
									? formatTime(lessonInfo.planBeginTime, 'YYYY-MM-DD HH:mm:ss')
									: ''
							}}
							~ {{ lessonInfo?.planEndTime ? formatTime(lessonInfo.planEndTime, 'HH:mm:ss') : '' }}
						</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">所属课程</span>
						<div class="lesson-name">{{ lessonInfo?.subjectName || '未知课程' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课教师</span>
						<div class="lesson-name">{{ lessonInfo?.teacherNames || '未知老师' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课学院</span>
						<div class="lesson-name">{{ lessonInfo?.academyName || '未知学院' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">教学班级</span>
						<div class="lesson-name">{{ lessonInfo?.teachingClassName || '未知班级' }}</div>
					</div>
				</div>
			</div>
			<!-- -----教学内容量化----- -->
			<div v-if="moduleShow.moduleTitleShow" class="node-text">
				<p>教学内容量化</p>
			</div>
			<!-- 课堂信息 -->
			<div
				v-if="moduleShow.lessonInfoBlockShow && !moduleShow.moduleTitleShow"
				class="block-item-wrapper lesson-info-block"
			>
				<div class="block-title">课堂信息</div>
				<div class="block-content">
					<div class="lesson-info-item-wrapper">
						<span class="info-label">课堂名称</span>
						<div class="lesson-name">{{ lessonInfo?.name || '未知课堂' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">上课时间</span>
						<div class="lesson-name">
							{{
								lessonInfo?.planBeginTime
									? formatTime(lessonInfo.planBeginTime, 'YYYY-MM-DD HH:mm:ss')
									: ''
							}}
							~ {{ lessonInfo?.planEndTime ? formatTime(lessonInfo.planEndTime, 'HH:mm:ss') : '' }}
						</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">所属课程</span>
						<div class="lesson-name">{{ lessonInfo?.subjectName || '未知课程' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课教师</span>
						<div class="lesson-name">{{ lessonInfo?.teacherNames || '未知老师' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课学院</span>
						<div class="lesson-name">{{ lessonInfo?.academyName || '未知学院' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">教学班级</span>
						<div class="lesson-name">{{ lessonInfo?.teachingClassName || '未知班级' }}</div>
					</div>
				</div>
			</div>
			<!-- 课堂提及知识点统计 -->
			<div
				v-if="moduleShow.knowledgePointBlockShow"
				class="block-item-wrapper knowledge-point-block"
			>
				<div class="block-title">课堂提及知识点统计</div>
				<div class="block-content">
					<div class="knowledge-point-wrapper-header">
						<span class="knowledge-point-name">知识点</span>
						<span class="knowledge-point-count">提及次数</span>
					</div>
					<div v-for="i in 5" :key="i" class="knowledge-point-item">
						<span class="knowledge-point-name">非相对论物理学</span>
						<span class="knowledge-point-count">12</span>
					</div>
				</div>
			</div>
			<!-- 教学内容精准度 -->
			<div
				v-if="moduleShow.teachingAccuracyBlockShow"
				class="block-item-wrapper teaching-accuracy-block"
			>
				<div class="block-title">教学内容精准度</div>
				<div class="block-content">
					<div class="teaching-accuracy-result">
						<span class="result-label">精准度得分</span>
						<div class="result-right">
							<div class="result-star">
								<el-rate v-model="rateValue" disabled />
							</div>
							<div class="result-score">
								<span class="result-value">10</span>
								<span class="result-unit">分</span>
							</div>
						</div>
					</div>
					<div class="teaching-accuracy-summary">
						含义：教师讲解的内容是否村子概念性错误、逻辑性错误、实时性错误、表述歧义等。
					</div>
				</div>
			</div>
			<!-- 教师讲解内容统计 -->
			<div
				v-if="moduleShow.teacherLectureBlockShow"
				class="block-item-wrapper teacher-lecture-block"
			>
				<div class="block-title">教师讲解内容统计</div>
				<div class="block-content"></div>
			</div>
			<!-- -----教学环节量化----- -->
			<div v-if="moduleShow.moduleTitleShow" class="node-text">
				<p>教学环节量化</p>
			</div>
			<!-- 课堂信息 -->
			<div
				v-if="moduleShow.lessonInfoBlockShow && !moduleShow.moduleTitleShow"
				class="block-item-wrapper lesson-info-block"
			>
				<div class="block-title">课堂信息</div>
				<div class="block-content">
					<div class="lesson-info-item-wrapper">
						<span class="info-label">课堂名称</span>
						<div class="lesson-name">{{ lessonInfo?.name || '未知课堂' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">上课时间</span>
						<div class="lesson-name">
							{{
								lessonInfo?.planBeginTime
									? formatTime(lessonInfo.planBeginTime, 'YYYY-MM-DD HH:mm:ss')
									: ''
							}}
							~ {{ lessonInfo?.planEndTime ? formatTime(lessonInfo.planEndTime, 'HH:mm:ss') : '' }}
						</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">所属课程</span>
						<div class="lesson-name">{{ lessonInfo?.subjectName || '未知课程' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课教师</span>
						<div class="lesson-name">{{ lessonInfo?.teacherNames || '未知老师' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课学院</span>
						<div class="lesson-name">{{ lessonInfo?.academyName || '未知学院' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">教学班级</span>
						<div class="lesson-name">{{ lessonInfo?.teachingClassName || '未知班级' }}</div>
					</div>
				</div>
			</div>
			<!-- 部分环节总时长及课堂占比 -->
			<div v-if="moduleShow.lessonSectionBlockShow" class="block-item-wrapper lesson-section-block">
				<div class="block-title">部分环节总时长及课堂占比</div>
				<div class="block-content">
					<div class="section-wrapper">
						<span class="section-name">课堂互动</span>
						<div class="section-progress">
							<div class="progress-bar" style="width: 90%">
								<span class="progress-value right">11.5%</span>
							</div>
						</div>
						<span class="section-time">10分32秒</span>
					</div>
					<div class="section-wrapper">
						<span class="section-name">讲解学习目标</span>
						<div class="section-progress">
							<div class="progress-bar" style="width: 20%">
								<span class="progress-value left">11.5%</span>
							</div>
						</div>
						<span class="section-time">10分32秒</span>
					</div>
				</div>
			</div>
			<!-- -----教师行为量化----- -->
			<div v-if="moduleShow.moduleTitleShow" class="node-text">
				<p>教师行为量化</p>
			</div>
			<!-- 课堂信息 -->
			<div
				v-if="moduleShow.lessonInfoBlockShow && !moduleShow.moduleTitleShow"
				class="block-item-wrapper lesson-info-block"
			>
				<div class="block-title">课堂信息</div>
				<div class="block-content">
					<div class="lesson-info-item-wrapper">
						<span class="info-label">课堂名称</span>
						<div class="lesson-name">{{ lessonInfo?.name || '未知课堂' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">上课时间</span>
						<div class="lesson-name">
							{{
								lessonInfo?.planBeginTime
									? formatTime(lessonInfo.planBeginTime, 'YYYY-MM-DD HH:mm:ss')
									: ''
							}}
							~ {{ lessonInfo?.planEndTime ? formatTime(lessonInfo.planEndTime, 'HH:mm:ss') : '' }}
						</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">所属课程</span>
						<div class="lesson-name">{{ lessonInfo?.subjectName || '未知课程' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课教师</span>
						<div class="lesson-name">{{ lessonInfo?.teacherNames || '未知老师' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">开课学院</span>
						<div class="lesson-name">{{ lessonInfo?.academyName || '未知学院' }}</div>
					</div>
					<div class="lesson-info-item-wrapper">
						<span class="info-label">教学班级</span>
						<div class="lesson-name">{{ lessonInfo?.teachingClassName || '未知班级' }}</div>
					</div>
				</div>
			</div>
			<!-- 教师行为规范 -->
			<div
				v-if="moduleShow.teacherBehaviorBlockShow"
				class="block-item-wrapper teacher-behavior-block"
			>
				<div class="block-title">教师行为规范</div>
				<div class="block-content">
					本堂课老师迟到<span class="danger">3分12秒4</span>，实际早退<span class="danger"
						>5分钟</span
					>，接打电话<span class="danger">2次</span>。
				</div>
			</div>
			<!-- 教师语言表达 -->
			<div
				v-if="moduleShow.teacherLanguageBlockShow"
				class="block-item-wrapper teacher-language-block"
			>
				<div class="block-title">教师语言表达</div>
				<div class="block-content">
					本堂课老师平均语速为<span class="highlight">300字/分</span>，最该语速为<span
						class="highlight"
						>400字/分</span
					>，最低语速为<span class="highlight">200字/分</span>。
				</div>
			</div>
			<!-- 教师课堂提问 -->
			<div
				v-if="moduleShow.teacherQuestionBlockShow"
				class="block-item-wrapper teacher-question-block"
			>
				<div class="block-title">教师课堂提问</div>
				<div class="block-content"></div>
			</div>
			<!-- 师生互动分析 -->
			<div
				v-if="moduleShow.teacherStudentInteractionBlockShow"
				class="block-item-wrapper teacher-student-interaction-block"
			>
				<div class="block-title">师生互动分析</div>
				<div class="block-content">
					<div v-for="i in 2" :key="i" class="interaction-wrapper">
						<div class="interaction-info">
							<span class="interaction-name">师生互动问答</span>
							<span class="interaction-count">3次</span>
						</div>
						<div class="interaction-statistics">
							<div class="statistics-item">
								<span class="name">师生互动总时长</span>
								<span class="value">10分32秒</span>
							</div>
						</div>
					</div>
					<div v-for="i in 2" :key="i" class="interaction-wrapper">
						<div class="interaction-info">
							<span class="interaction-name">学生参与总人数</span>
							<span class="interaction-count">5人</span>
						</div>
						<div class="interaction-statistics">
							<div class="statistics-item">
								<span class="name">学生发言总时长</span>
								<span class="value">09分18秒</span>
							</div>
							<div class="statistics-item">
								<span class="name">学生发言课堂时长占比</span>
								<span class="value">10.3%</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- -----知识图谱----- -->
			<!-- 知识关系 -->
			<div v-if="moduleShow.relationBlockShow" class="block-item-wrapper relation-block">
				<div class="block-title">知识关系</div>
				<div v-if="data.knowledgeRelation?.length" class="block-content">
					<div v-for="item in data.knowledgeRelation" :key="item.name" class="relation-wrapper">
						<span class="relation-label">{{ item.name }}</span>
						<div class="relation-item-wrapper">
							<span v-for="link in item.link" :key="link.code" class="relation-item">
								<span class="relation-item-text">{{ link.name }}</span>
								<span v-if="false" class="relation-item-del"
									><el-icon><Close /></el-icon
								></span>
							</span>
							<span v-if="false" class="relation-item add-item">
								<el-icon><Plus /></el-icon>
							</span>
						</div>
					</div>
				</div>
				<div v-else class="empty-txt">暂无内容</div>
			</div>
			<!-- 视频片段 -->
			<div v-if="moduleShow.videoBlockShow" class="block-item-wrapper video-block">
				<div class="block-title">视频片段</div>
				<div v-if="data.knowledgeDetail?.length" class="block-content">
					<div v-for="(item, index) in data.knowledgeDetail" :key="index" class="video-wrapper">
						<div class="clips-info" @click="onChangeVideoTime(item.startTime)">
							<el-icon><VideoPlay /></el-icon>
							<span class="clips-time"
								>{{ formatSeconds(item.startTime) || '' }}-{{
									formatSeconds(item.endTime) || ''
								}}</span
							>
						</div>
						<div class="lesson-name">{{ item.title || '-' }}</div>
						<div class="lesson-summary">
							{{ item.summary || '-' }}
						</div>
						<el-button v-if="type !== 'lesson'" class="go-btn"> 进入课堂 </el-button>
					</div>
				</div>
				<div v-else class="empty-txt">暂无内容</div>
			</div>
			<!-- -----其他----- -->
			<!-- 课堂分析 -->
			<div
				v-if="moduleShow.lessonAnalysisBlockShow"
				class="block-item-wrapper lesson-analysis-block"
			>
				<div class="block-title">课堂分析</div>
				<div class="block-content">
					<div v-for="i in 3" :key="i" class="analysis-wrapper">
						<div class="analysis-time">00:34:10-00:36:10</div>
						<div class="analysis-name">物理学2025-06-23</div>
						<div class="analysis-summary">
							老师通过八皇后问题讲解回溯算法的实现过程，包括棋盘状态判断、递归函数设计、穷举与回溯机制，强调通过不断尝试和回退找到所有可能的
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="moduleShow.footerShow" class="footer-wrapper">
			<el-button>进入课堂分析详情</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { formatTime, formatSeconds } from '@/assets/js/utils';
import type {
	CourseListItemType,
	KnowledgeDetailItemType,
	SingleKnowledgeRelationItemType
} from './NodeInfoDialog.type';

withDefaults(
	defineProps<{
		isVisibleNodeInfoDialog: boolean;
		typeName?: string;
		textName?: string;
		type: string;
		lessonInfo?: CourseListItemType | null;
		moduleShow?: {
			nodeTitleShow: boolean;
			lessonInfoBlockShow: boolean;
			moduleTitleShow: boolean;
			knowledgePointBlockShow: boolean;
			teachingAccuracyBlockShow: boolean;
			teacherLectureBlockShow: boolean;
			lessonSectionBlockShow: boolean;
			teacherBehaviorBlockShow: boolean;
			teacherLanguageBlockShow: boolean;
			teacherQuestionBlockShow: boolean;
			teacherStudentInteractionBlockShow: boolean;
			relationBlockShow: boolean;
			videoBlockShow: boolean;
			lessonAnalysisBlockShow: boolean;
			footerShow: boolean;
		};
		data: {
			knowledgeDetail?: KnowledgeDetailItemType[];
			knowledgeRelation?: SingleKnowledgeRelationItemType[];
		};
	}>(),
	{
		isVisibleNodeInfoDialog: false,
		typeName: '',
		textName: '',
		type: 'lesson',
		lessonInfo: null,
		moduleShow: () => ({
			nodeTitleShow: false,
			lessonInfoBlockShow: true,
			moduleTitleShow: false,
			knowledgePointBlockShow: true,
			teachingAccuracyBlockShow: true,
			teacherLectureBlockShow: true,
			lessonSectionBlockShow: true,
			teacherBehaviorBlockShow: true,
			teacherLanguageBlockShow: true,
			teacherQuestionBlockShow: true,
			teacherStudentInteractionBlockShow: true,
			relationBlockShow: false,
			videoBlockShow: false,
			lessonAnalysisBlockShow: false,
			footerShow: false
		}),
		data: () => ({
			knowledgeDetail: [],
			knowledgeRelation: []
		})
	}
);

const emit = defineEmits<{
	(e: 'closeNodeInfoDialog'): void; // 关闭节点信息对话框
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
}>();

const closeNodeInfoDialog = () => {
	emit('closeNodeInfoDialog');
};

// 分值
const rateValue = ref<number>(3.5);

// 切换视频时间
const onChangeVideoTime = (time: number) => {
	emit('changeVideoTime', time);
};
</script>

<style lang="scss" scoped>
.node-info-dialog {
	// 知识关系
	.block-item-wrapper.relation-block {
		.block-content {
			padding-bottom: 1rem;
		}
		.relation-wrapper {
			display: flex;
			align-items: flex-start;
			margin-bottom: 1rem;
			&:last-child {
				margin-bottom: 0;
			}
			.relation-label {
				padding-right: 1rem;
				flex-shrink: 0;
				font-size: $font-size-small-1;
				color: $text-color-secondary;
			}
			.relation-item-wrapper {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				.relation-item {
					position: relative;
					margin-right: 1rem;
					margin-bottom: 1rem;
					padding: 0 1.2rem;
					background-color: $bg-block-color-brand;
					color: $color_brand;
					border-radius: 1rem;
					font-size: $font-size-small-1;
					&:last-child {
						margin-right: 0;
					}
					&:hover {
						.relation-item-del {
							display: block;
						}
					}
					.relation-item-del {
						display: none;
						position: absolute;
						top: -0.5rem;
						right: -0.2rem;
						width: 1.2rem;
						height: 1.2rem;
						cursor: pointer;
						color: $text-color-secondary;
						&:hover {
							color: $color-brand;
						}
					}
				}
				.add-item {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #ecedee;
					color: $text-color-secondary;
					cursor: pointer;
					&:hover {
						color: $color-brand;
						background-color: $bg-block-color-brand;
					}
				}
			}
		}
	}
	// 视频片段
	.block-item-wrapper.video-block {
		.video-wrapper {
			position: relative;
			margin-top: 1.5rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid $border-color-primary;
			&:first-child {
				margin-top: 0;
			}
			.clips-info {
				display: flex;
				align-items: center;
				color: $color_brand;
				cursor: pointer;
				.clips-time {
					padding-left: 0.5rem;
					font-size: $font-size-base;
				}
				.el-icon {
					font-size: 1.8rem;
				}
			}
			.lesson-name {
				padding: 1rem 0;
				color: $text-color-regular;
				font-size: $font-size-base;
			}
			.lesson-summary {
				color: $text-color-secondary;
				font-size: $font-size-small-1;
			}
			.go-btn {
				position: absolute;
				top: 0;
				right: 0;
				padding: 0.3rem 1rem;
				color: $color-brand;
				font-size: $font-size-small-1;
				border: 1px solid $color_brand;
				border-radius: 4px;
				cursor: pointer;
			}
		}
	}
	// 课堂信息
	.block-item-wrapper.lesson-info-block {
		.lesson-info-item-wrapper {
			display: flex;
			padding-bottom: 0.5rem;
			&:last-child {
				padding-bottom: 0;
			}
			.info-label {
				flex-shrink: 0;
				width: 8rem;
				color: $text-color-secondary;
				font-size: $font-size-small-1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.lesson-name {
				flex: 1;
				min-width: 0;
				flex-wrap: wrap;
				color: $text-color-regular;
				font-size: $font-size-small-1;
			}
		}
	}
	// 课堂分析
	.block-item-wrapper.lesson-analysis-block {
		.analysis-wrapper {
			position: relative;
			margin-top: 1.5rem;
			padding-bottom: 1.5rem;
			border-bottom: 1px solid $border-color-primary;
			&:first-child {
				margin-top: 0;
			}
			.analysis-time {
				font-size: $font-size-base;
				color: $text-color-regular;
			}
			.analysis-name {
				padding: 1rem 0;
				color: $text-color-regular;
				font-size: $font-size-base;
			}
			.analysis-summary {
				color: $text-color-secondary;
				font-size: $font-size-small-1;
			}
		}
	}
	// 教师行为规范
	.block-item-wrapper.teacher-behavior-block {
		font-size: $font-size-small-1;
		color: $text-color-regular;
		.danger {
			color: $color-danger;
		}
	}
	// 教师语言表达
	.block-item-wrapper.teacher-language-block {
		font-size: $font-size-small-1;
		color: $text-color-regular;
		.highlight {
			color: $color-brand;
		}
	}
	// 教师课堂提问
	.block-item-wrapper.teacher-question-block {
	}
	// 师生互动分析
	.block-item-wrapper.teacher-student-interaction-block {
		.block-content {
			padding: 1rem 0;
			background-color: transparent;
		}
		.interaction-wrapper {
			margin-bottom: 1rem;
			font-size: $font-size-small-1;
			&:last-child {
				margin-bottom: 0;
			}
			.interaction-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0.7rem 1rem;
				background-color: $bg-block-color-brand;
				color: $text-color-regular;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				.interaction-name {
					flex: 1;
				}
				.interaction-count {
					padding-left: 0.5rem;
					flex-shrink: 0;
					font-size: $font-size-base;
					color: $color_brand;
					font-family: 'Alibaba-PuHuiTi-Medium';
				}
			}
			.interaction-statistics {
				padding: 1rem;
				background-color: $bg-block-color-primary;
				.statistics-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 1rem;
					&:last-child {
						margin-bottom: 0;
					}
				}
				.name {
					flex: 1;
					color: $text-color-secondary;
				}
				.value {
					padding-left: 0.5rem;
					flex-shrink: 0;
					color: $text-color-regular;
				}
			}
		}
	}
	// 部分环节总时长及课堂占比
	.block-item-wrapper.lesson-section-block {
		.block-content {
			display: grid;
			grid-template-columns: auto 1fr auto;
			gap: 0 1rem;
			align-items: center;
		}
		.section-wrapper {
			display: contents;
			.section-name {
				padding-right: 0;
				font-size: $font-size-small-1;
				color: $text-color-regular;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				max-width: 12rem;
			}
			.section-progress {
				position: relative;
				height: 1.6rem;
				background-color: color.adjust($bg-block-color-primary, $lightness: -6%);
				border-radius: 0.8rem;
				overflow: visible;
				.progress-bar {
					position: relative;
					z-index: 1;
					height: 100%;
					width: 20%;
					background-color: color.adjust($color_brand, $lightness: 25%);
					border-radius: 0.8rem;
					.progress-value {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						font-size: $font-size-small-2;
						color: $color_brand;
						white-space: nowrap;
					}
					.progress-value.left {
						left: 0.8rem;
						right: unset;
					}
					.progress-value.right {
						left: unset;
						right: 0.8rem;
					}
				}
			}
			.section-time {
				padding-left: 0;
				font-size: $font-size-small-1;
				color: $text-color-regular;
				text-align: right;
				white-space: nowrap;
			}
		}
	}
	// 课堂提及知识点统计
	.block-item-wrapper.knowledge-point-block {
		.block-content {
			padding: 0;
		}
		.knowledge-point-wrapper-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.7rem 1rem;
			background-color: $bg-block-color-brand;
			border-top-left-radius: 0.4rem;
			border-top-right-radius: 0.4rem;
			.knowledge-point-name {
				flex: 1;
				font-size: $font-size-small-1;
				color: $text-color-regular;
			}
			.knowledge-point-count {
				flex-shrink: 0;
				width: 8rem;
				text-align: right;
				font-size: $font-size-small-1;
				color: $text-color-regular;
				border-left: 1px solid #fff;
			}
		}
		.knowledge-point-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.5rem 1rem;
			.knowledge-point-name {
				flex: 1;
				font-size: $font-size-small-1;
				color: $text-color-regular;
			}
			.knowledge-point-count {
				flex-shrink: 0;
				width: 8rem;
				text-align: right;
				font-size: $font-size-base;
				color: $color_brand;
				font-family: 'douyinbold';
				border-left: 1px solid #fff;
			}
		}
	}
	// 教学内容精准度
	.block-item-wrapper.teaching-accuracy-block {
		.block-content {
			padding: 0;
			background-color: transparent;
		}
		.teaching-accuracy-result {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: $bg-block-color-primary;
			padding: 0.7rem 1rem;
			.result-label {
				font-size: $font-size-small-1;
				color: $text-color-regular;
			}
			.result-right {
				display: flex;
				align-items: center;
				gap: 1rem;
			}
			.result-score {
				display: flex;
				align-items: baseline;
				white-space: nowrap;
			}
			.result-value {
				font-size: $font-size-large-3;
				font-family: $font-family-bold;
				color: $color_brand;
			}
			.result-unit {
				font-size: $font-size-small-1;
				color: $text-color-secondary;
				padding-left: 0.2rem;
			}
		}
		.teaching-accuracy-summary {
			padding: 0.7rem 1rem;
			font-size: $font-size-small-1;
			color: $text-color-secondary;
		}
	}
	// 教师讲解内容统计
	.block-item-wrapper.teacher-lecture-block {
	}
}
</style>
